<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点赞</button>
</body>
<script>
    // 函数的防抖和节流：都是为了防止短时间内高频率的调用同一接口
    // 防抖：设置延时器，短时间内高频率的触发只有最后一次触发成功
    // var timer;
    // document.getElementById('btn').onclick = function(){
    //     clearTimeout(timer)
    //     timer = setTimeout(function(){
    //         console.log(1);
    //     },1000)
    // }
    // 节流：设置状态锁，短时间内高频率的触发只有第一次能触发成功
    var key = false
    document.getElementById('btn').onclick = function () {
        if (!key) {
            console.log(1);   //请求
            key = true
            setTimeout(function () {
                key = false
            }, 1000)

        }
    }
    // 防抖和节流的区别：函数节流不管事件触发的多频繁，都会保证在规定时间内一定会执行一次事件处理函数，函数防抖是在最后一次触发事件后才会执行
</script>

</html>